<template>
  <div>
    <!-- search start -->
    <search-bar placeHolder="请输入用户名称/设备号"
                @handleSearch="init" />
    <!-- search end -->
    <!-- 过期预警数据 -->
    <div class="box">
      <v-table :tableData="warningData.list"
               :tableLabel="tableLabel"
               @policyDetail="handlePolicyDetail"
               @handleRemind="handleRemind"
               v-loading="loading" />
      <!-- 分页器 -->
      <ubi-paging :page.sync="page"
                  :pageSize.sync="pageSize"
                  style="
                  position:absolute;
                  bottom:0;
                  "
                  :pageCount="warningData.rows" />
    </div>
    <!-- 保单详情弹框 -->
    <v-dialog :show.sync="isShowPolicyDetail"
              :append-to-body=true
              width='55%'
              title="保单信息">
      <v-table :tableData="warningPolicyDetail"
               :tableLabel="warningPolicyTitle"
               :border=true
               :height="0"
               @checkChildInfo="isShowDetailChild=true" />
      <template>
        <el-dialog width="30%"
                   title="险种详情"
                   :visible.sync="isShowDetailChild"
                   append-to-body
                   :center="true"
                   v-el-drag-dialog>
          <el-table :data="warningPolicyDetailName_price"
                    border
                    sstyle="width:100%">
            <el-table-column prop="type"
                             label="险种"
                             align="center">
            </el-table-column>
            <el-table-column prop="value"
                             label="险种金额"
                             align="center">
            </el-table-column>
          </el-table>
        </el-dialog>
      </template>
    </v-dialog>
  </div>
</template>

<script>//handleCheckChildInfo
import ubiPaging from '../common/ubi-data-pagination'
export default {
  name: "policyWarning",
  data () {
    return {
      activeDate: '',//搜索选择的日期
      page: 1, //当前页
      pageSize: 8, //每页显示多少条数据
      searchkey: '', //搜索关键字
      warningData: [], //过期预警表格数据
      tableLabel: [
        {
          label: '用户姓名',
          prop: 'name'

        },
        {
          label: '用户电话',
          prop: 'phone'

        },
        {
          label: '设备号',
          prop: 'eq_num'

        },
        {
          label: '车牌号',
          prop: 'plate'

        },
        {
          label: 'vin码',
          prop: 'vin',
          isEmpty: true
        },
        {
          label: '保单信息',
          detail: true,
          methodName: "policyDetail",
          prop: 'pid',
          btnText: '详情'
        },
        {
          label: '是否提醒',
          prop: 'remind_status',
          remind: true,
          methodName: 'handleRemind',
          btnText: "提醒"
        }
      ],
      warningPolicyDetail: [],//保单详情数据
      isShowPolicyDetail: false, //保单详情
      warningPolicyTitle: [
        {
          label: '保单号',
          prop: 'policy_num'
        },
        {
          label: '投保日期',
          prop: 'start_time'
        },
        {
          label: '截止日期',
          prop: 'end_time'
        },
        {
          label: '险种',
          detail: true,
          prop: 'pid',
          btnText: '详情',
          methodName: 'checkChildInfo'
        },
        {
          label: '投保总额',
          prop: 'total'
        }
      ],
      isShowDetailChild: false, //子弹框默认状态
      warningPolicyDetailName_price: [], //险种信息
      loading: false
    }
  },
  components: {
    ubiPaging,
  },
  methods: {
    async init (search = this.searchkey) { //页面初始化渲染数据
      this.loading = true;
      const paramsStr = Object.assign({},search,{page: this.page,pageSize: this.pageSize})
      let res = await this.api.overdueWarning(paramsStr).then(res => res)
      this.warningData = res.data;
      this.loading = false
    },
    handlePolicyDetail (pid) { //查看保单详情
      this.api.policyDetail({ pid: pid }).then(res => {
        this.warningPolicyDetail = [];
        this.isShowPolicyDetail = true;
        this.warningPolicyDetail.push(res.data);
        this.warningPolicyDetailName_price = res.data.name_price
      })
    },
    async handleRemind (key) { //保单预警提醒
      let self = this;
      this.$confirm("确认提醒该用户吗？", {
        title: '提示',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let res = this.api.remind({ pid: key.pid }).then(res => res);
        self.init()
        self.$message({
          type: res.code == 1 ? 'success' : 'error',
          message: res.msg
        })
      }).catch(() => {

      })


    }
  },
  watch: {
    page () {
      this.init()
    },
    pageSize () {
      this.init()
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
.box {
  min-height:81vh;
  position:relative;
  padding-bottom:40px;
  box-sizing:border-box;
}
</style>
